<template>
    <div class="menuList">
        <div class="menuItem" v-for="(item,i) in menuAuthList" :key="i">
            <div class="menuTitle">{{item.name}}</div>
            <router-link v-for="(link,index) in item.children" :key="index" :to="link.path">
                <p :class="['menuLink',link.path == $route.path ? 'menuActive' : '']">{{link.name}}</p>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: "elementMenu",
    props: {
        menuList: {
            type: Array,
            default: [],
        },
        rootPath: String
    },
    data() {
        return {
            menuAuthList: [],
        };
    },
    created() {
        this.setMenuAuth();
    },
    methods: {
        setMenuAuth() {
            this.menuAuthList = this.menuList.filter(item => this.menuAuthCodes.includes(item.menuCode));
            this.menuAuthList.forEach(item => {
                item.children = item.children.filter(items => this.menuAuthCodes.includes(items.menuCode))
            });
            this.setDefaultPath();
        },
        setDefaultPath(){
            if (this.menuAuthList.length > 0) {
                if (this.menuAuthList[0].children.length > 0 && this.$route.path == ("/" + this.rootPath)) {
                    this.$router.push(this.menuAuthList[0].children[0].path);
                }
            }
        }
    },
    activated() {
        this.setDefaultPath();
    }
};
</script>

<style lang="scss">
.menuList {
    width: 200px;
    padding: 10px;
    .menuItem {
        .menuTitle {
            padding-left: 10px;
            color: #363c43;
            font-size: 16px;
            font-weight: bold;
            margin: 20px 0 10px;
        }
        .menuLink {
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            color: #676e75;
            font-size: 14px;
            border-radius: 6px;
            &.menuActive,
            &:hover {
                background: #f5f7fa;
                color: #6b5ee2;
            }
        }
    }
}
</style>
